<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转平移</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        button{
            width: 120px;
            height: 42px;
            border: none;
            outline: none;
            color: #f2f2f2;
            background: #30336b;
            box-shadow: 2px 2px 5px #30336b;
            line-height: 42px;
            border-radius: 4px;
            transition: box-shadow .8s;
        }
        button:hover{
            cursor: pointer;
            box-shadow: 2px 2px 15px #30336b;
        }
        canvas{
            border:  dashed 2px #ccc;
        }
    </style>
    <script>
        function $$(id)
        {
            return document.getElementById(id);
        }
        function drawRect(color){
            var can = $$('can');
            canva = can.getContext('2d');
            canva.strokeStyle = color;
            canva.lineWidth = 3;
            canva.strokeRect(600,50,80,40)
        }

        function drawCircle(color)
        {
            canva.beginPath();
            canva.arc(30,30,30,0,Math.PI*2,1);
            canva.closePath();

            canva.strokeStyle = color;
            canva.lineWidth = 3;
            canva.stroke();
        }

        function move()
        {
            canva.translate(40,40);
            drawRect('black');
        }

        function zoom()
        {
            drawCircle('red');
            canva.scale(0.5,1.5);
            drawCircle('green');
        }

        function rotate()
        {
            canva.rotate(Math.PI*2/360*45);
            drawRect('green');
            cans.rotate(-Math.PI/4);
            drawRect('black');
        }
    </script>
</head>
<body onload="drawRect('purple')">
    <div id="container">
        <div id="canvasContainer">
            <canvas id="can" width="1000px" height="800px"></canvas>
        </div>
        <div id="handleContainer">
            <button type="button" onclick="move();">移动</button>
            <button type="button" onclick="zoom()">缩放</button>
            <button type="button" onclick="rotate()">旋转</button>
        </div>
    </div>
</body>
</html>